<template>
  <div class="bg-blue-100 pb-24">
    <this-banners :all="banners" />
    <section class="p-4 bg-white">
      <div class="flex items-center justify-between">
        <div class="text-lg text-black tracking-widest">{{ title }}</div>

        <wx-launch class="relative" :path="miniPath">
          <div
            class="text-sm text-blue-500"
            :class="isWx ? 'pointer-events-none' : ''"
            @click="$openApp"
          >
            <i class="iconfont icon-share"></i>
            分享
          </div>
        </wx-launch>
      </div>
      <div class="mt-4 flex items-center">
        <i class="mt-1 iconfont icon-user text-lg text-gray-600"></i>
        <div class="ml-1 flex flex-col w-full">
          <span>{{ join }}人已报名</span>
          <div class="w-3/4 flex">
            <span
              class="inline-block h-1 bg-red-500"
              :style="{ width: joinedPecent + '%' }"
            ></span>
            <span class="inline-block h-1 flex-1 bg-gray-400"></span>
          </div>
        </div>
      </div>
      <div class="mt-4">
        活动时间：{{ start }}
        <i class="iconfont icon-right1 text-blue-400 mx-1"></i>
        {{ end }}
      </div>
    </section>
    <section class="mt-4 p-4 bg-white">
      <div class="flex items-center">
        <span class="inline-block w-2px h-4 bg-red-400"></span>
        <span class="ml-2 text-black">活动详情</span>
      </div>
      <div class="mt-4" v-html="detail"></div>
    </section>
    <section class="mt-4 p-4 bg-white">
      <div class="flex items-center">
        <span class="inline-block w-2px h-4 bg-red-400"></span>
        <span class="ml-2 text-black">活动须知</span>
      </div>
      <div class="mt-4" v-html="notice"></div>
    </section>

    <div class="fixed bg-white border-t bottom-0 inset-x-0 p-4 shadow">
      <wx-launch class="w-full" :path="miniPath">
        <van-button
          block
          type="danger"
          size="large"
          class="text-lg"
          :class="isWx ? 'pointer-events-none' : ''"
          @click="$openApp"
        >
          <i class="iconfont icon-wechat mr-1"></i>
          加入活动</van-button
        >
      </wx-launch>
    </div>
  </div>
</template>

<script>
import thisBanners from './banners.vue'

import wxShare from '../../plugins/wxShare.js'
import wxLaunch from '../../components/wxLaunch.vue'

export default {
  components: { thisBanners, wxLaunch },
  inject: ['isWx'],
  data() {
    return {
      banners: [],
      start: '',
      end: '',
      detail: '',
      notice: '',
      title: '',
      joinedPecent: 0,
      isWx: true,
      join: '',
      aid: null,
    }
  },
  computed: {
    miniPath() {
      return `/page/active_show/active_show?id=${this.aid}`
    },
  },
  created() {
    this.aid = this.$route.query.aid
    this.$axios.get(`/activities/${this.aid}`).then((res) => {
      const act = res.data.result
      document.title = act.act_name
      this.title = act.act_name
      this.banners = [
        act.banner_image1,
        act.banner_image2,
        act.banner_image3,
      ].filter((src) => src !== '')
      this.start = this.$ymd(act.start_time)
      this.end = this.$ymd(act.end_time)
      this.detail = act.detail
      this.notice = act.act_notice
      this.joinedPecent = (act.current_join / act.min_join) * 100
      this.join = act.current_join + act.virtual_join

      wxShare({
        title: this.title,
        imgUrl: act.banner_image1,
        desc: this.title,
      })
    })
  },
  methods: {
    getApp() {
      window.location.href =
        'https://sj.qq.com/myapp/detail.htm?apkName=com.xidebao'
    },
  },
}
</script>

<style>
</style>
